<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
    <script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>
    <script>

        // 隐藏
        function hideFn() {
            // $("#showDiv").hide("slow","swing",function () {
            //     alert("隐藏了。。。。。。")
            // });

            // 默认方式
            // $("#showDiv").hide("fast","swing");


            //滑动方式
            // $("#showDiv").slideUp("slow");

            //淡入淡出方式
            $("#showDiv").fadeOut("slow");

        }
        // 显示
        function showFn() {
            // $("#showDiv").show("slow","swing",function () {
            //     alert("显示了.........")
            // });

            // 默认方式
            // $("#showDiv").show(5000,"linear");

            // 滑动方式
            // $("#showDiv").slideDown("slow");

            //淡入淡出方式
            $("#showDiv").fadeIn(5000,"linear");
        }

        
        // 切换(显示和隐藏div)
        function toggleFn() {
            // 默认方式
            // $("#showDiv").toggle("slow");

            //滑动方式
            // $("#showDiv").slideToggle("slow");

            //淡入淡出方式
            $("#showDiv").fadeToggle("slow");
        }

    </script>
</head>
<body>
<input type="button" value="点击按钮隐藏div" onclick="hideFn()">
<input type="button" value="点击按钮显示div" onclick="showFn()">
<input type="button" value="点击按钮切换div显示和隐藏" onclick="toggleFn()">

<div id="showDiv" style="width:300px;height:300px;background:pink">
    div显示和隐藏
</div>
</body>
</html>
